<template>
  <div>
    <a-form-model ref="finePoList">
      <a-table
        :columns="columns"
        :data-source="records"
        :rowKey="
          (record, index) => {
            return index
          }
        "
        bordered
        :pagination="false"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <span slot="reduceRender" slot-scope="text, record">
          <a-form-model-item>
            <a-select
              style="width: 100%"
              v-model="record.reduce"
              :disabled="
                !checkPermission(['WORK_REPORT_MANAGER']) &&
                !(
                  process.taskDefKey == 'followUser' ||
                  process.taskDefKey == 'followUser1' ||
                  process.taskDefKey == 'signUser' ||
                  (process.taskDefKey == 'relationUser' &&
                    process.assignees &&
                    process.assignees.indexOf(userinfo.info.username) > -1 &&
                    userinfo.info.username == flow.settlementUserId)
                )
              "
            >
              <a-select-option v-for="(item, iindex) in reduceOption" :key="'reduce' + iindex" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </span>
        <span slot="poNoRender" slot-scope="text, record">
          <!-- <a-form-model-item :prop="'records.' + index + '.poNo'" :rules="rules.poNo"> -->
          <a-form-model-item>
            <a-input style="width: 100%" v-model="record.poNo" disabled> </a-input>
            <!-- <a-input
              style="width: 100%"
              v-model="record.poNo"
              :disabled="
                !checkPermission(['WORK_REPORT_MANAGER']) &&
                !(
                  process.taskDefKey == 'followUser' ||
                  process.taskDefKey == 'followUser1' ||
                  process.taskDefKey == 'signUser' ||
                  (process.taskDefKey == 'relationUser' &&
                    process.assignees &&
                    process.assignees.indexOf(userinfo.info.username) > -1 &&
                    userinfo.info.username == flow.settlementUserId)
                )
              "
            >
            </a-input> -->
          </a-form-model-item>
        </span>
        <span slot="poLineRender" slot-scope="text, record">
          <!-- <a-form-model-item :prop="'records.' + index + '.poLine'" :rules="process.taskDefKey == 'signUser'?rules.poLine:''"> -->
          <a-form-model-item>
            <a-input
              style="width: 100%"
              v-model="record.poLine"
              :disabled="
                !checkPermission(['WORK_REPORT_MANAGER']) &&
                !(
                  process.taskDefKey == 'followUser' ||
                  process.taskDefKey == 'followUser1' ||
                  process.taskDefKey == 'signUser' ||
                  (process.taskDefKey == 'relationUser' &&
                    process.assignees &&
                    process.assignees.indexOf(userinfo.info.username) > -1 &&
                    userinfo.info.username == flow.settlementUserId)
                )
              "
            >
            </a-input>
          </a-form-model-item>
        </span>
        <span slot="fineAmountTypeRender" slot-scope="text, record">
          <!-- <a-form-model-item :prop="'records.' + index + '.fineAmountType'" :rules="rules.fineAmountType"> -->
          <a-form-model-item>
            <a-input
              style="width: 100%"
              v-model="record.fineAmountType"
              :disabled="
                !checkPermission(['WORK_REPORT_MANAGER']) &&
                !(
                  process.taskDefKey == 'followUser' ||
                  process.taskDefKey == 'followUser1' ||
                  process.taskDefKey == 'signUser' ||
                  (process.taskDefKey == 'relationUser' &&
                    process.assignees &&
                    process.assignees.indexOf(userinfo.info.username) > -1 &&
                    userinfo.info.username == flow.settlementUserId)
                )
              "
              @change="changeFineAmount"
            >
            </a-input>
          </a-form-model-item>
        </span>
        <span slot="index" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span
          slot="actionRender"
          slot-scope="text, record, index"
          style="display: flex; justify-content: center"
          v-if="
            process.taskDefKey == 'followUser' ||
            process.taskDefKey == 'followUser1' ||
            process.taskDefKey == 'signUser' ||
            (process.taskDefKey == 'relationUser' &&
              process.assignees &&
              process.assignees.indexOf(userinfo.info.username) > -1 &&
              userinfo.info.username == flow.settlementUserId)
          "
        >
          <a-button type="link" @click="clearFinePo(index)"> 清空 </a-button>
          <a-icon
            v-if="index == 0"
            type="plus-circle"
            theme="twoTone"
            @click="addFinePo(index)"
            style="line-height: 36px"
          />
          <a-icon
            v-else
            type="minus-circle"
            theme="twoTone"
            two-tone-color="#eb2f96"
            @click="removeQualityLine(index)"
            style="line-height: 36px"
          />
        </span>
      </a-table>
    </a-form-model>
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import '@/config/upload.install.js'
export default {
  props: {
    poNo: {
      type: String,
      default: null,
    },
    qualityId: {
      type: String,
      default: null,
    },
    permission: {
      type: Array,
      default: () => {
        return []
      },
    },
    process: {
      type: Object,
      default: () => {
        return {}
      },
    },
    flow: {
      type: Object,
      default: () => {
        return {}
      },
    },
    finePo: {
      type: String,
      default: () => {
        return null
      },
    },
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractReportInfo',
      },
      urls: {
        list: '/qualityLine/list',
        delete: '/qualityLine/delete',
      },
      attachs: [],
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'index' },
          width: '80px',
        },
        {
          title: '订单号',
          key: 'fileName',
          width: '200px',
          scopedSlots: { customRender: 'poNoRender' },
        },
        {
          title: '行号',
          key: 'fileSize',
          width: '200px',
          scopedSlots: { customRender: 'poLineRender' },
        },
        {
          title: '扣罚金额(元)',
          width: '200px',
          align: 'center',
          scopedSlots: { customRender: 'fineAmountTypeRender' },
        },
        {
          title: '开票金额',
          width: '200px',
          align: 'center',
          scopedSlots: { customRender: 'reduceRender' },
        },
        {
          title: '操作',
          width: '120px',
          align: 'center',
          scopedSlots: { customRender: 'actionRender' },
        },
      ],
      rules: {
        poNo: [{ required: true, message: '请输入', trigger: 'blur' }],
        poLine: [{ required: true, message: '请输入', trigger: 'blur' }],
        fineAmountType: [{ required: true, message: '请输入', trigger: 'blur' }],
        reduce: [{ required: true, message: '请选择', trigger: 'blur' }],
      },
      reduceOption: [
        { label: '不变', value: '0' },
        { label: '减少', value: '1' },
      ],
      currentSelection: [],
      selectedRowKeys: [],
      form: {},
      records: [{ poNo: this.poNo }],
    }
  },
  mounted() {
    this.fetchQualityLine()
  },
  methods: {
    checkPermission(powers) {
      let hasPower = false
      for (let p of powers) {
        if (this.permission.indexOf(p) > -1) {
          hasPower = true
          break
        }
      }
      return hasPower
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.currentSelection = selectedRows
    },
    addFinePo() {
      this.records.push({ poNo: this.poNo })
    },
    async removeQualityLine(index) {
      let record = this.records[index]
      if (record.id) {
        let res = await postAction(this.urls.delete + '/' + record.id, {})
        if (!res.success) {
          this.$messageWorkReport.error(res.message)
        }
      }
      this.$messageWorkReport.success('移除成功')
      this.records.splice(index, 1)
    },
    clearFinePo(index) {
      let tempList = this.records
      let record = tempList[index]
      let clearRecord = {}
      clearRecord.id = record.id
      clearRecord.poNo = this.poNo
      tempList[index] = clearRecord
      this.records = tempList
      this.$forceUpdate()
    },
    checkFinePo() {
      // this.$refs.finePoList.validate((valid) => {
      //   if (!valid) {
      //     return false
      //   } else {
      //     return true
      //   }
      // })
      // return false
      return true
    },
    getFinePo() {
      return this.records
    },
    changeFineAmount() {
      this.records.forEach((record) => {
        if (record.fineAmountType && isNaN(record.fineAmountType)) {
          record.fineAmountType = ''
        }
      })
    },
    fetchQualityLine() {
      if (this.qualityId) {
        let param = { qualityId: this.qualityId }
        postAction(this.urls.list, param).then((res) => {
          if (res.success) {
            this.records = res.result
            this.records.forEach((r) => {
              r.poNo = this.poNo
            })
          }
        })
      }
    },
  },
  watch: {
    qualityId(newV, old) {
      if (newV) {
        this.fetchQualityLine()
      }
    },
    poNo(newV, old) {
      if (newV) {
        this.records.forEach((r) => {
          r.poNo = this.poNo
        })
      }
    },
  },
}
</script>

<style scoped>
/deep/ .upload-demo {
  display: inline-block;
}
/deep/.ant-col .ant-form-item-label {
  min-width: 135px;
  line-height: 40px;
  display: inline-block;
  overflow: hidden;
  line-height: 39.9999px;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}
/deep/.ant-row .ant-form-item {
  display: flex;
}
/deep/.ant-col .ant-form-item-control-wrapper {
  width: 100%;
}
/deep/.anticon .anticon-plus-circle {
  display: flex;
  align-items: center;
}
/deep/.ant-calendar-picker {
  width: 100%;
}
.btn-box {
  margin-bottom: 15px;
}
.btn-box .ant-btn {
  margin-right: 10px;
}
/deep/.ant-form .ant-form-item-control-wrapper {
  display: inline-block;
  width: 100% !important;
}
>>> .ant-form .ant-form-item-control-wrapper {
  display: inline-block;
  width: 100% !important;
}
::v-deep.ant-form .ant-form-item-control-wrapper {
  display: inline-block;
  width: 100% !important;
}
/deep/.ant-form-item-control-wrapper {
  display: inline-block;
  width: 100% !important;
}
>>> .ant-form-item-control-wrapper {
  display: inline-block;
  width: 100% !important;
}
::v-deep.ant-form-item-control-wrapper {
  display: inline-block;
  width: 100% !important;
}
</style>
